<template>
    <el-card class="notice-publish">
        <template #header>
            <h3>发布班级通知</h3>
        </template>

        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" class="form-container">
            <!-- 标题 -->
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入通知标题（必填，不超过50字）" maxlength="50" style="width: 400px" />
            </el-form-item>

            <!-- 通知类型 -->
            <!-- <el-form-item label="类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择通知类型" style="width: 200px">
                    <el-option label="重要通知" value="重要通知"></el-option>
                    <el-option label="日常通知" value="日常通知"></el-option>
                    <el-option label="维修通知" value="维修通知"></el-option>
                </el-select>
            </el-form-item> -->

            <!-- 通知范围 -->
            <!-- <el-form-item label="范围" prop="dormitoryRange">
                <el-checkbox-group v-model="form.dormitoryRange">
                    <el-checkbox label="全部宿舍" value="all"></el-checkbox>
                    <el-checkbox label="指定宿舍" value="specified"></el-checkbox>
                </el-checkbox-group>
                <el-input v-model="form.specifiedDormitories" placeholder="请输入宿舍号（多个用逗号分隔）"
                    v-show="form.dormitoryRange.includes('specified')" style="width: 200px" />
            </el-form-item> -->

            <!-- 通知内容 -->
            <el-form-item label="内容" prop="content">
                <el-input type="textarea" v-model="form.content" :rows="5" placeholder="请输入通知内容（必填）" autosize
                    style="width: 600px" />
            </el-form-item>

            <!-- 发布时间 -->
            <el-form-item label="时间" prop="publishTime">
                <!-- <el-date-picker v-model="form.publishTime" type="datetime" placeholder="选择发布时间"
                    format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" style="width: 300px" /> -->
                 <el-date-picker
      v-model="form.publishTime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
            </el-form-item>

            <!-- 操作按钮 -->
            <el-form-item class="button-group">
                <el-button type="primary" @click="handleSubmit">发布通知</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '@/store/user';
import {  informationPublish }  from '@/api/classLeader';

const userStore = useUserStore();
// 表单数据
const form = reactive({
  title: '',
  type: '日常通知', // 默认日常通知
  dormitoryRange: ['all'], // 默认全选
  specifiedDormitories: '',
  content: '',
  publishTime: new Date(), // 默认当前时间
  
});

// 表单验证
const rules = reactive({
  title: [{ required: true, message: '请填写通知标题', trigger: 'blur' }],
  content: [{ required: true, message: '请填写通知内容', trigger: 'blur' }]
});

// 表单引用
const formRef = ref(null);


// 提交表单
// 提交表单
const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return;
    
    // 处理指定宿舍格式
    if (form.dormitoryRange.includes('specified')) {
      form.specifiedDormitories = form.specifiedDormitories.trim().replace(/\s+/g, ',');
    } else {
      form.specifiedDormitories = '';
    }

    // 确认发布
    try {
      await ElMessageBox.confirm('确认发布通知？', '提示', { type: 'warning' });
      
      // 准备API数据
      const apiData = {
        title: form.title,
        content: form.content,
        // dormitoryRange: form.dormitoryRange.join(','),
        // specifiedDormitories: form.specifiedDormitories,
        publishTime: new Date(form.publishTime).toISOString().slice(0, 19).replace('T', ' '),
        studentId: userStore.userInfo.studentId
      };
      
      // 调用API
      const response = await informationPublish(apiData);
      
      if (response.code === 0) {
        // 处理成功响应
      ElMessage.success('通知已发布');
  
      }
      
    } catch (error) {
      // 处理错误
      ElMessage.error(error.message || '发布失败，请重试');
    }
  });
};
// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
  form.type = 'normal';
  form.dormitoryRange = ['all'];
  form.publishTime = new Date();
};
</script>

<style scoped>
.notice-publish {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.el-form-item__content {
  gap: 10px;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
</style>